<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>WebRTC p2p data</title>
    <script src="js/jquery-2.0.0.js"></script>
    <script src="js/bootstrap.js"></script>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <link href="css/serverless-webrtc-bootstrap.css" rel="stylesheet">
</head>
<body>
<a href="https://github.com/cjb/serverless-webrtc/"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png" alt="Fork me on GitHub"></a>
<div class="span4">
  <Video id="localVideo">
</div>
<div class="span4">
  <Video id="remoteVideo">
</div>
<div class="span4">
  <fieldset class="well">
    <p class="head muted">
      Serverless WebRTC chat demonstration.
    </p>
    <div class="text-info" id="chatlog" style="height:350px; overflow:auto;">
    </div>
  </fieldset>
  <form class="form-inline" onSubmit="return sendMessage()" action="">
    <input type="text" id="messageTextBox" placeholder="Type your message here">
    <button type="submit" id="sendMessageBtn" class="btn">Send message</button>
  </form>
  <input type="file" id="fileBtn">
</div>

<div class="modal" id="showLocalOffer" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" hidden>
  <div class="modal-header">
    <h3 id="myModalLabel">Send your local offer to someone else</h3>
  </div>
  <div class="modal-body">
    Here's your "offer" -- it tells someone else how to connect to you.  Send the whole thing to them, for example in an instant message or e-mail.
  <br/>
  <textarea class="input-large" id="localOffer" name="localOffer" rows="10" cols="100"></textarea>
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary" id="offerSentBtn" data-dismiss="modal" aria-hidden="true">Okay, I sent it.</button>
  </div>
</div>

<div class="modal" id="showLocalAnswer" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" hidden>
  <div class="modal-header">
    <h3 id="myModalLabel">Send your local answer to someone else</h3>
  </div>
  <div class="modal-body">
    Here's your "answer" -- it tells someone else how to connect to you.  Send the whole thing to them, for example in an instant message or e-mail.
  <br/>
  <textarea class="input-large" id="localAnswer" name="localAnswer" rows="10" cols="100"></textarea>
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary" id="answerSentBtn" data-dismiss="modal" aria-hidden="true">Okay, I sent it.</button>
  </div>
</div>

<div class="modal" id="getRemoteOffer" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" hidden>
  <div class="modal-header">
    <h3 id="myModalLabel">Paste the "offer" you received</h3>
  </div>
  <div class="modal-body">
    The person who created the room will send you an "offer" string -- paste it here.
  <br/>
  <textarea class="input-large" id="remoteOffer" name="remoteOffer" rows="10" cols="100"></textarea>
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary" id="offerRecdBtn" data-dismiss="modal" aria-hidden="true">Okay, I pasted it.</button>
  </div>
</div>

<div class="modal" id="getRemoteAnswer" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" hidden>
  <div class="modal-header">
    <h3 id="myModalLabel">Paste the "answer" you received</h3>
  </div>
  <div class="modal-body">
    Now paste in the "answer" that was sent back to you.
  <br/>
  <textarea class="input-large" id="remoteAnswer" name="remoteAnswer" rows="10" cols="100"></textarea>
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary" id="answerRecdBtn" data-dismiss="modal" aria-hidden="true">Okay, I pasted it.</button>
  </div>
</div>

<div class="modal" id="waitForConnection" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" hidden>
  <div class="modal-header">
    <h3 id="myModalLabel">Waiting for connection</h3>
  </div>
  <div class="modal-body">
    This dialog will disappear when a connection is made.
  </div>
  <div class="spinner" align="center">
    <img src="img/spinner.gif"></img>
  </div>
</div>

<div class="modal" id="createOrJoin" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <h3 id="myModalLabel">Create or join a room?</h3>
  </div>
  <div class="modal-footer">
    <button class="btn" id="joinBtn" data-dismiss="modal" aria-hidden="true">Join</button>
    <button class="btn btn-primary" id="createBtn" data-dismiss="modal" aria-hidden="true">Create</button>
  </div>
</div>

<script src="js/serverless-webrtc.js"></script>
<script src="js/file-transfer.js"></script>
</body>
</html>
